<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts Half Pie Chart</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <style>
        #chart {
            width: 600px;
            height: 400px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="chart"></div>
    <script>
        const chartDom = document.getElementById('chart');
        const myChart = echarts.init(chartDom);

        // 给定总数据
        const totalValue = 2000;

        // 两个半圆的数据
        const data1 = 800; // 第一个半圆的数据
        const data2 = 1200; // 第二个半圆的数据

        // 计算比例
        const ratio1 = data1 / totalValue; // 第一个半圆的比例
        const ratio2 = data2 / totalValue; // 第二个半圆的比例

        const option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'Data 1',
                    type: 'pie',
                    radius: ['50%', '70%'], // 外圆半径
                    center: ['50%', '50%'], // 圆心位置
                    startAngle: 180, // 起始角度
                    endAngle: 180 + 180 , // 结束角度（根据比例计算）
                    data: [
                        { value: data1, name: 'Data 1' }
                    ],
                    label: {
                        show: false // 隐藏标签
                    },
                    itemStyle: {
                        color: 'transparent', // 填充颜色为透明
                        borderWidth: 2, // 边框宽度
                        borderColor: '#5470C6', // 边框颜色
                        borderType: 'dashed' // 边框类型为虚线
                    }
                },
                {
                    name: 'Data 2',
                    type: 'pie',
                    radius: ['30%', '50%'], // 内圆半径
                    center: ['50%', '50%'], // 圆心位置
                    startAngle: 180, // 起始角度
                    endAngle: 180 + 180 , // 结束角度（根据比例计算）
                    data: [
                        { value: data2, name: 'Data 2' }
                    ],
                    label: {
                        show: false // 隐藏标签
                    },
                    itemStyle: {
                        color: 'transparent', // 填充颜色为透明
                        borderWidth: 2, // 边框宽度
                        borderColor: '#91CC75', // 边框颜色
                        borderType: 'dashed' // 边框类型为虚线
                    }
                }
            ]
        };

        myChart.setOption(option);
    </script>
</body>
</html>